<template>
  <!-- 进度模块 -->
  <div class="visit-records">
    <div v-for="(item) in data" :key="item.state" class="record-item">
      <div :class="{ 'top-line': true, 'default': !item.optTime, 'error': item.state == 0, 'warning': item.state == 91 }">
        <div class="date">{{ item.optTime }}</div>
      </div>
      <div class="card">
        <span>{{ item.stateName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VisitRecords',
  components: {},
  props: {
    data: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang='less' scoped>
.visit-records {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  height: 100%;
  padding-bottom: 20px;
  overflow-y: auto;
}

.record-item {
  position: relative;
  margin-bottom: 15px;

  &:not(:last-child):after {
    content: '';
    position: absolute;
    left: calc(12px / 2);
    top: 20px;
    height: calc(100% + 14px);
    border-left: 1px solid #ccc;
  }

  .top-line {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    height: 26px;
    padding-left: 26px;
    font-size: 14px;

    &::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      background: #3FA40E;
    }

    .date {
      height: 26px;
      line-height: 28px;
      color: #424E67;
      // padding-left: 15px;
    }
  }

  .default {
    .tag {
      background: #989898;
    }

    &::after {
      background: #989898;
    }
  }

  .error {
    .tag {
      background: red;
    }

    &::after {
      background: red;
    }
  }

  .warning {
    .tag {
      background: #E6A23C;
    }

    &::after {
      background: #E6A23C;
    }
  }

  .card {
    padding: 12px 15px;
    border-radius: 8px;
    background-color: #fff;
    color: #424E67;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-left: 26px;
    margin-top: 5px;
    text-align: left;
  }
}
</style>

